<template>
  <div class="main">
    <el-form :model="formData" ref="ruleFormRef" size="large" :rules="rules">
      <h2 class="h2">欢迎使用管理系统</h2>
      <el-form-item prop="mobile">
        <el-input
          type="tel"
          v-model="formData.mobile"
          placeholder="请输入电话号码"
          maxlength="11"
          clearable
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="formData.password"
          placeholder="请输入密码"
          maxlength="21"
          show-password
        />
      </el-form-item>
      <div>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm(ruleFormRef)"
            >登录</el-button
          >

          <el-button
            @click="clearForm(ruleFormRef)"
            >清空</el-button
          >
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import ajax from "@/util/request";
import md5 from "js-md5";
import { ref, reactive } from "vue";
import { setAdminRoute } from "@/router/index";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";

const formData = reactive<any>({});

const ruleFormRef = ref<FormInstance>();

// const fh = "~`!@#$%^&*()-_=+|\\/?.,";
// const sz = "1234567890";
// const xx = "abcdefghijklmnopqrstuvwxyz";
// const dx = xx.toUpperCase();

// 自定义校验规则，如果校验失败，那么抛出错误，如果成功那么调用callback
// const checkPassword = function (rule: any, value: string, callback: any) {
//   let arr = Array.from(value);
//   if (
//     arr.some((v: string) => fh.indexOf(v) != -1) &&
//     arr.some((v: string) => fh.indexOf(v) != -1) &&
//     arr.some((v: string) => sz.indexOf(v) != -1) &&
//     arr.some((v: string) => xx.indexOf(v) != -1) &&
//     arr.some((v: string) => xx.indexOf(v) != -1)
//   ) {
//     callback();
//   } else {
//     throw new Error("密码需要包含大小字母、小写字母、数字、符号");
//   }
// };

const store = useStore();

const rules = reactive<FormRules>({
  // 电话号码不能为空
  // 电话号码必须是11位
  mobile: [
    { required: true, message: "请输入电话号码", trigger: "blur" },
    { min: 11, max: 11, message: "电话号码必须是11位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 21, message: "密码至少6位", trigger: "blur" },
    // { validator: checkPassword, trigger: "blur" },
  ],
});

const router = useRouter();

function clearForm(ruleFormRef: FormInstance | undefined) {
  if (ruleFormRef) {
    ruleFormRef.resetFields();
  }
}

function submitForm(ruleFormRef: FormInstance | undefined) {
  if (!ruleFormRef) {
    return;
  }
  ruleFormRef.validate((valid) => {
    // 如果校验通过
    if (valid) {
        const data = {
            ...formData,
            applicationName: "ss"
        };

        // md5加密
        data.password = md5(formData.password);
        data.applicationName = "ss";

        ajax("/login/adminLogin",data).then((res:any) => {
            // 登录成功
            if (res.data.status > 0) {
                // 成功之后，将用户信息存入到vuex中
                store.commit("setAdmin",res.data.result_data);

                // 设置路由
                setAdminRoute();

                // 跳转到首页
                router.push("/adm-index");

            }
        })
    } 
  });
}
</script>

<style scoped>
.h2 {
  padding: 15px 0px;
}

.main {
  background-color: #333333;
  height: 100vh;
}

.el-form {
  width: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 15px;
  text-align: center;
  padding: 40px;
}

.btn-login {
  width: 100%;
}
</style>